File: /var/www/html/dashboard.orbiwheels.com/resources/views/transporter/index.blade.php
@extends('layout.transporter_master')
@section('content')
<div class="right_col" role="main">
<div class="">
<div class="page-title">
</div>
<div class="clearfix"></div>
@if (auth()->guard('trans')->user()->status == \App\Models\Transporter::SUSPENDED)
<div class="d-flex justify-content-center align-items-center w-100 vh-100 bg-light">
<div class="card shadow-lg border-0 p-5 text-center" style="max-width: 500px; border-radius: 20px;">
<div class="card-body">
<h2 class="text-danger mb-3">
Your Account has been Suspended
</h2>
<p class="text-muted mb-4">
Please contact <a href="mailto:[email protected]"
class="text-decoration-none">support</a>
for more information.
</p>
<form id="logout-form" action="{{ route('logout') }}" method="POST"
style="display: none;">
@csrf
</form>
<a class="btn btn-outline-danger px-4 rounded-pill" href="javascript:void(0);"
onclick="document.getElementById('logout-form').submit();">Log Out</a>
</div>
</div>
</div>
@else
<div class="row">
<div class="col-md-12">
<div class="">
<div class="x_content">
<div class="row">
<!-- Pending Rides -->
<div class="animated flipInY col-lg-3 col-md-3 col-sm-6">
<div class="tile-stats">
<div class="icon"><i class="fa fa-clock-o"></i></div>
<div class="count">{{ $pendingRide }}</div>
<h3>Pending Rides</h3>
</div>
</div>
<!-- Ongoing Rides -->
<div class="animated flipInY col-lg-3 col-md-3 col-sm-6">
<div class="tile-stats">
<div class="icon"><i class="fa fa-car"></i></div>
<div class="count">{{ $ongoingRide }}</div>
<h3>Ongoing Rides</h3>
</div>
</div>
<!-- Completed Rides -->
<div class="animated flipInY col-lg-3 col-md-3 col-sm-6">
<div class="tile-stats">
<div class="icon"><i class="fa fa-check-circle"></i></div>
<div class="count">{{ $completeRide }}</div>
<h3>Completed Rides</h3>
</div>
</div>
<!-- Cancelled Rides -->
<div class="animated flipInY col-lg-3 col-md-3 col-sm-6">
<div class="tile-stats">
<div class="icon"><i class="fa fa-times-circle"></i></div>
<div class="count">{{ $cancelledRide }}</div>
<h3>Cancelled Ride</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endif
@if (auth()->guard('trans')->user()->status == \App\Models\Transporter::APPROVED)
<div class="row">
<div class="col-md-6">
<div class="x_panel">
<div class="x_title">
<h2>Customer <small>Request</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content" id="ride_requests" style="max-height: 400px; overflow-y: auto;">
</div>
</div>
</div>
<div class="col-md-6">
<div class="x_panel">
<div class="x_title">
<h2>Driver & Vehicle Utilization</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<!-- Driver -->
<div class="widget_summary">
<div class="w_left w_25">
<span>Driver Occupied</span>
</div>
<div class="w_center w_55">
<div class="progress">
<div class="progress-bar bg-green" role="progressbar"
aria-valuenow="{{ $driverOccupiedPercent }}" aria-valuemin="0"
aria-valuemax="100" style="width: {{ $driverOccupiedPercent }}%;">
</div>
</div>
</div>
<div class="w_right w_20">
<span>{{ $driverOccupiedPercent }}%</span>
</div>
<div class="clearfix"></div>
</div>
<!-- Vehicle -->
<div class="widget_summary">
<div class="w_left w_25">
<span>Vehicle Occupied</span>
</div>
<div class="w_center w_55">
<div class="progress">
<div class="progress-bar bg-green" role="progressbar"
aria-valuenow="{{ $vehicleOccupiedPercent }}" aria-valuemin="0"
aria-valuemax="100" style="width: {{ $vehicleOccupiedPercent }}%;">
</div>
</div>
</div>
<div class="w_right w_20">
<span>{{ $vehicleOccupiedPercent }}%</span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
@elseif (auth()->guard('trans')->user()->status == \App\Models\Transporter::PENDING)
<div class="d-flex justify-content-center align-items-center w-100 bg-light" style="height: 70vh;">
<div class="card shadow-lg border-0 p-5 text-center" style="max-width: 500px; border-radius: 20px;">
<div class="card-body">
<h2 class="text-warning mb-3">
Your account is pending approval.
</h2>
<p class="text-muted mb-4">
Please wait for admin to approve your account before accessing ride requests.
</p>
</div>
</div>
</div>
@endif
</div>
</div>
<!-- Modal for Driver & Vehicle -->
@include('components.transporter.assign-modal')
@endsection
@push('script')
<!-- Firebase App -->
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<!-- Firebase Realtime Database -->
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
<script>
const driverSearchUrl = "{{ route('driver.search') }}";
const vehicleSearchUrl = "{{ route('vehicle.search') }}";
const assignRideUrl = "{{ route('booking.assign', ':id') }}"; // placeholder
const csrfToken = "{{ csrf_token() }}";
</script>
<script src="{{ asset('src/js/transporter/assign-modal.js') }}"></script>
<script>
$(document).ready(function() {
$(document).on('click', '.accept', function() {
let url = $(this).data('url');
let id = $(this).data('id');
let rideVehicleType = $(this).data('vehicle-type') ?? 0;
Swal.fire({
title: "Are you sure?",
text: "Do you want to accept this request?",
icon: "warning",
showCancelButton: true,
confirmButtonText: "Yes, accept"
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: "Assign Driver & Vehicle?",
text: "Do you want to assign them now?",
icon: "question",
showCancelButton: true,
confirmButtonText: "Yes, assign now",
cancelButtonText: "No, just accept"
}).then((assignResult) => {
if (assignResult.isConfirmed) {
// open assign modal
openAssignModal(id, null, null, true);
} else {
// accept without assignment
$.post(url, {
_token: '{{ csrf_token() }}'
}, function(res) {
location.reload();
});
}
});
}
});
});
$(document).on('click', '.reject', function() {
var url = $(this).data('url');
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, reject it!"
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
method: 'POST',
url: url,
data: {
_token: '{{ csrf_token() }}'
},
success: function(response) {
if (response.status) {
Swal.fire({
title: "Rejected!",
text: response.message,
icon: "success"
});
} else {
Swal.fire({
title: "Error",
text: response.message,
icon: "error"
});
}
},
error: function(xhr, status, error) {
console.log(xhr.responseText);
Swal.fire({
title: "Error",
text: "An error occurred. Please try again later.",
icon: "error"
});
}
});
}
});
});
});
</script>
<script>
window.firebaseConfig = {
apiKey: "{{ config('services.firebase.apiKey') }}",
authDomain: "{{ config('services.firebase.authDomain') }}",
databaseURL: "{{ config('services.firebase.database_url') }}",
projectId: "{{ config('services.firebase.projectId') }}",
storageBucket: "{{ config('services.firebase.storageBucket') }}",
messagingSenderId: "{{ config('services.firebase.messagingSenderId') }}",
appId: "{{ config('services.firebase.appId') }}",
measurementId: "{{ config('services.firebase.measurementId') }}"
};
</script>
<script>
// Firebase config (from your Firebase console)
const firebaseConfig = window.firebaseConfig;
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.database(app);
const viewBaseUrl = "{{ route('request.view', ':id') }}";
const acceptBaseUrl = "{{ route('request.accept', ':id') }}";
const rejectBaseUrl = "{{ route('request.reject', ':id') }}";
// Current transporter ID (passed from Laravel)
const transporterId = "{{ auth()->guard('trans')->user()->id }}";
const requestsRef = firebase.database().ref("transporters/" + transporterId + "/requests");
// Listen for new ride requests
requestsRef.on("child_added", function(snapshot) {
const request = snapshot.val();
let view_url = viewBaseUrl.replace(':id', request.encrypted_id);
let accept_url = acceptBaseUrl.replace(':id', request.encrypted_id);
let reject_url = rejectBaseUrl.replace(':id', request.encrypted_id);
// Build card HTML dynamically
let card = `
<div class="card mb-3" id="request_${snapshot.key}">
<div class="card-header d-flex justify-content-between align-items-center py-2">
<h6 class="m-0">${request.ride_type ?? '-'}</h6>
<h6 class="m-0">${request.booking_type == 1 ? 'One Way' : 'Two Way'}</h6>
</div>
<div class="card-body py-2">
<section class="panel">
<div class="panel-body">
<div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Pickup location</p>
<p> ${request.pickup}</p>
</div>
<div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Pickup location</p>
<p> ${request.drop}</p>
</div>
<div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Date</p>
<p> ${request.from_date} To ${request.to_date}</p>
</div>
<div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Pickup Time</p>
<p> ${request.pickup_time}</p>
</div>
<div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Distance</p>
<p> ${request.distance_km}</p>
</div>
<div class="project_detail d-flex justify-content-between align-items-center">
<p class="title">Payout</p>
<p> ${request.fare}</p>
</div>
<div class="project_detail d-flex justify-content-end">
<a href="${view_url}"
class="btn btn-primary btn-sm">View</a>
<a href="javascript:void(0)"
data-url="${accept_url}"
data-id="${request.encrypted_id}"
data-vehicle-type="{{ $request->booking->vehicle_preferred ?? 0 }}"
class="btn btn-sm btn-success accept">Accept</a>
<a href="javascript:void(0)"
data-url="${reject_url}"
data-id="${request.encrypted_id}"
class="btn btn-sm btn-danger reject">Reject</a>
</div>
</div>
</section>
</div>
</div>
`;
document.querySelector("#ride_requests").insertAdjacentHTML("afterbegin", card);
});
requestsRef.on("child_removed", function(snapshot) {
console.log("❌ Child Removed:", snapshot.key);
document.querySelector(`#request_${snapshot.key}`)?.remove();
});
</script>
@endpush